<template>
    <div class="indexContent">
        <el-button @click="dialogVisible = true" size="small" style="margin-bottom: 10px;">新增活动</el-button>
        <div style="margin-bottom: 10px;float: right">
            <span style="margin-right: 10px;font-size: 18px;font-weight: bold;">{{ systemId == 1 ? '诚赉健康产业' : '国色天莲' }}</span>
            <el-button @click="exitHandle" size="small" type="danger">退出登录</el-button>
        </div>
        <div :class="activeIndex == index ? 'selectBox indexTop' : 'indexTop'" v-for="(item, index) in activeList"
            :key="index" @click="selectActive(item, index)">
            <span class="topTit">{{ item.signatureName }}</span>
            <div class="dateInfo">会议日期：<span>{{ item.signatureStartTime }}至{{ item.signatureEndTime }}</span></div>
            <div class="dateInfo">签到设置：<span>{{ item.signatureFlag }}</span></div>
            <div class="dateInfo">创建设置：<span>{{ item.signatureTime }}</span></div>
            <img :src=imgUrl class="yuanImg">
        </div>

        <el-dialog title="设置" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动时间">
                    <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
                        v-model="form.time" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="签到设置">
                    <el-checkbox-group v-model="form.setting">
                        <el-checkbox label="姓名" name="setting"></el-checkbox>
                        <el-checkbox label="电话" name="setting"></el-checkbox>
                        <el-checkbox label="身份" name="setting"></el-checkbox>
                        <el-checkbox label="单位" name="setting"></el-checkbox>
                        <el-checkbox label="地区" name="setting"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="confirmHandle">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addSignature, getSignature } from '../network/jiang'
export default {
    name: 'index',
    data() {
        return {
            imgUrl: require('../assets/X2/index/yuan.png'),
            activeName: '',
            dialogVisible: false,
            form: {
                name: '',//活动名称
                time: '',//时间
                setting: [],//签到设置
            },
            activeId: '',
            activeList: [],
            activeIndex: 0,
            systemId: sessionStorage.systemId,
        }
    },
    created() {
        this.getData()
    },
    methods: {

        getData() {
            getSignature().then(res => {
                if (res.flag) {
                    console.log(res);
                    res.data.forEach(item => {
                        if (item.signatureStartTime) {
                            item.signatureStartTime = item.signatureStartTime.split(' ')[0]
                        }
                        if (item.signatureEndTime) {
                            item.signatureEndTime = item.signatureEndTime.split(' ')[0]
                        }

                    })
                    this.activeList = res.data.filter(item => {
                        return item.signatureNote == this.systemId
                    })
                    localStorage.form = JSON.stringify(res.data[0])
                }
            })
        },
        // 选择活动
        selectActive(obj, index) {
            this.$confirm('是否切换到该活动?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(index)
                this.activeIndex = index
                localStorage.form = JSON.stringify(obj)
                localStorage.removeItem('signUserList')
                localStorage.removeItem('signCityList')
                localStorage.removeItem('signProvinceList')
            }).catch(() => { });

            // localStorage.removeItem('signUserList')
        },

        confirmHandle() {
            if (this.form.name.trim() == '') {
                this.$message.warning('请输入名称')
                return
            } else if (this.form.time == '') {
                this.$message.warning('请选择活动时间')
                return
            } else if (this.form.setting.length == 0) {
                this.$message.warning('请至少勾选两项')
                return
            }
            this.dialogVisible = false
            console.log(this.form);
            localStorage.form = JSON.stringify(this.form)

            addSignature({
                signatureName: this.form.name,
                signatureStartTime: this.form.time[0],
                signatureEndTime: this.form.time[1],
                signatureFlag: this.form.setting.join(','),
                signatureNote: this.systemId
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.$message.success('设置成功')
                    this.handleClose()
                    this.getData()
                    localStorage.activeId = res.data
                }
            })
        },

        handleClose() {
            this.dialogVisible = false
        },

        exitHandle() {
            this.$confirm('此操作将退出账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                window.sessionStorage.clear();
                this.$message({
                    type: 'success',
                    message: '已退出!'
                });
                this.$router.replace({
                    path: '/login'
                });
            }).catch(() => { });
        },
    }
}
</script>

<style lang="less" scoped>
.indexContent {
    padding: 20px 30px;
}

.selectBox {
    border: 2px solid #3E68FF;
}

.indexTop {
    margin-bottom: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 16px 36px 18px;
    width: 100%;
    height: 150px;
    background: #FFFFFF;
    box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
    border-radius: 10px;
    cursor: pointer;

    .topTit {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .topTitle {
        font-size: 32px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .dateInfo {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;

        span {
            color: #3E68FF;
        }
    }
}

.indexMain {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 1px;

    >div {
        position: relative;
        box-sizing: border-box;
        padding: 24px 36px 10px 40px;
        width: 910px;
        height: 620px;
        background: #FFFFFF;
        box-shadow: 0px 1px 6px 0px rgba(72, 97, 117, 0.15);
        border-radius: 10px;

        .mainTip {
            font-size: 20px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
        }

        .mainTit {
            margin-top: 20px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }

        .mainhandle {
            width: 100%;
            text-align: right;
            margin-top: 20px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;

            span {
                color: #3E68FF;
            }
        }

        .contentTit {
            margin-top: 20px;
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
        }

    }
}

.yuanImg {
    position: absolute;
    top: -10px;
    right: -15px;
    width: 30px;
    height: 30px;
}
</style>